<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>贪吃蛇</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    #main {
      width: 360px;
      height: 420px;
      background-color: #b7d4a8;
      border: 10px #000 solid;
      margin: 50px auto;
      border-radius: 20px;
    }

    /* 蛇的活动区域 */
    #stage {
      width: 304px;
      height: 304px;
      border: 2px #000 solid;
      margin: 20px auto;
      position: relative;
    }

    /* 分数和等级 */
    #info {
      width: 304px;
      margin: 28px auto;
      display: flex;
      justify-content: space-between;
      font: bold 20px Courier;
    }

    /* 食物 */
    #food {
      width: 10px;
      height: 10px;
      position: absolute;
      top: 100px;
      left: 120px;
      display: flex;
      flex-flow: wrap;
    }

    #food > div {
      width: 5px;
      height: 5px;
      background-color: yellow;
      transform: rotate(45deg);
    }

    /* 蛇 */
    #snake > div {
      width: 10px;
      height: 10px;
      background-color: #000;
      position: absolute;
      border: 1px solid #b7d4a8;
    }

    /* 蛇头特殊 */
    #snake :nth-child(1) {
      width: 10px;
      height: 10px;
      position: absolute;
      border: 1px solid #b7d4a8;
      background-color: red;
      border-radius: 5px;
    }

  </style>
</head>
<body>
<div id="main">
  <div id="stage">

    <!-- 蛇 -->
    <div id="snake">
      <div></div>
    </div>

    <!-- 食物 -->
    <div id="food">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div id="info">
    <div>SCORE: <span id="score">0</span></div>
    <div>LEVEL: <span id="level">1</span></div>
  </div>
</div>

<script>
	// 获取蛇容器
	const snake = document.getElementById("snake");
	// 获取蛇的各个部分
	const snakeNodes = snake.getElementsByTagName("div");
	// 获取食物
	const food = document.getElementById("food");
	// 食物坐标的取值范围 0-290之间, 并且是整10的倍数 的随机数

	// 蛇移动的方向
	let dir;
	// 合法的方向按键
	const dirArr = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'w', 'a', 's', 'd'];
	// 方向对象
	const reObj = {
		"ArrowUp": "ArrowDown",
		"ArrowDown": "ArrowUp",
		"ArrowLeft": "ArrowRight",
		"ArrowRight": "ArrowLeft"
	};

	// 按键状态 true 表示激活
	let keyActive = true;

	// 分数和等级
	let scoreSpan = document.getElementById("score");
	let levelSpan = document.getElementById("level");

	let scoreNum = 0;
	let levelNum = 1;

	/* 绑定按键事件 keydown keyup */
	document.addEventListener("keydown", (event) => {
		// 当按下的是方向键时才修改dir, 按下其他按键不变
		if (keyActive && dirArr.includes(event.key)) {
			if (snakeNodes.length < 2 || event.key !== reObj[dir]) {
				dir = event.key;
				// 已经按下过一次按键, 就将按键状态设置为false move函数执行完毕后再设置回true
				keyActive = false;
			}
		}
	});


	// 蛇移动
	setTimeout(function move() {

		// 获取蛇头
		const snakeHead = snakeNodes[0];
		// 蛇头坐标
		let x = snakeHead.offsetLeft;
		let y = snakeHead.offsetTop;
		switch (dir) {
			case 'ArrowUp':   // 向上
			case 'w':
				y -= 10;
				break;
			case 'ArrowDown': // 向下
			case 's':
				y += 10;
				break;
			case 'ArrowLeft': // 向左
			case 'a':
				x -= 10;
				break;
			case 'ArrowRight':  // 向右
			case 'd':
				x += 10;
				break;
		}

		// 检查蛇是否吃到食物
		if (snakeHead.offsetTop === food.offsetTop && snakeHead.offsetLeft === food.offsetLeft) {
			// 改变食物的位置
			changeFood();
			// 增加蛇的长度
			snake.insertAdjacentHTML('beforeend', "<div/>");
			// 分数自增1
			scoreNum++;
			scoreSpan.textContent = scoreNum + '';

			// 每10分增加一个等级 最高等级是14
			if (scoreNum % 10 === 0 && levelNum < 14) {
				levelNum++;
				levelSpan.textContent = levelNum + '';
			}

		}

		// 检查游戏是否结束
		// 1 撞墙
		// 2 撞到身体
		if (x < 0 || x > 290 || y < 0 || y > 290) {
			alert('游戏结束');
			return;
		}

		// dir 有值才判断是否撞到身体
		// 头和尾相撞是可以的
		if (dir) {
			for (let i = 0; i < snakeNodes.length - 1; i++) {
				if (snakeNodes[i].offsetLeft === x && snakeNodes[i].offsetTop === y) {
					alert("撞到身体 游戏结束!");
					return;
				}
			}
		}

		// 获取尾巴
		const tail = snakeNodes[snakeNodes.length - 1];
		// 移动蛇的位置
		tail.style.left = x + 'px';
		tail.style.top = y + 'px';
		// 将蛇尾巴移动到蛇头的位置
		snake.insertAdjacentElement("afterbegin", tail);

		// 按键状态再恢复为true, 保证move 函数执行一次过程中按键状态只变化一次
		keyActive = true;

		setTimeout(move, 300 - levelNum * 30);
	}, 300);

	/**
	 * 随机生成食物的坐标
	 */
	function changeFood() {
		const x = Math.floor(Math.random() * 30) * 10;
		const y = Math.floor(Math.random() * 30) * 10;

		food.style.left = x + 'px';
		food.style.top = y + 'px';
	}

	changeFood();


</script>

</body>
</html>
